Page({
    data: {},
    ctx: null,

    touchPosition: { x: 0, y: 0 },
    touch: false,
    onReady: function () {
      this.ctx = wx.createCanvasContext('myCanvas');
      this.drawCanvas('black'); // Draw initial black overlay when page has loaded
    },
    touchStart: function (e) {
      this.touch = true;
      var touch = e.touches[0];
      this.touchPosition = { x: touch.x, y: touch.y };
      this.drawCanvas('destination-out');
    },
    touchMove: function (e) {
      if (!this.touch) return;
      var touch = e.touches[0];
      this.touchPosition = { x: touch.x, y: touch.y };
      this.drawCanvas('destination-out');
    },
    touchEnd: function () {
      this.touch = false;
      this.drawCanvas('black');
    },
    drawCanvas: function (action) {
      var screenWidth  = wx.getSystemInfoSync().windowWidth;
      var screenHeight = wx.getSystemInfoSync().windowHeight;
  
      if (action === 'black') {
        // Draw black overlay
        this.ctx.setFillStyle('black');
        this.ctx.fillRect(0, 0, screenWidth, screenHeight);
      } else if (action === 'destination-out') {
        // Set composite operation to 'destination-out' 
        this.ctx.globalCompositeOperation = 'destination-out';
  
        // Draw clear circle at touch position. Change the radius parameter (currently 10) to adjust the size of the circle.
        this.ctx.beginPath();
        this.ctx.arc(this.touchPosition.x, this.touchPosition.y, 0, 0, 2 * Math.PI, true); // Circle radius is 10
        this.ctx.setFillStyle('white'); 
        this.ctx.fill();
        
        // Reset composite operation to default
        this.ctx.globalCompositeOperation = 'source-over'; 
      }
      this.ctx.draw();
    }
  });
  